<template>
    <el-dialog :title="bell_title" v-model="visible" :width="800" destroy-on-close @closed="$emit('closed')" align-center :close-on-click-modal="false">
		<el-form :model="form" :rules="rules" :disabled="mode == 'show'" ref="dialogForm" label-width="90" label-position="right">
            <el-form-item label="接收员" prop="apply_id">
                <template #label>
                    <div>
                        <div>接收员</div>
                        <el-button type="primary" text size="small" @click="select_user">选择</el-button>
                    </div>
                </template>
                <div class="border">
                    <el-tag v-for="(item,index) in userList" :key="index" closable type="info" style="margin-right: 20px" @close="delTag(index)">
                        {{ item.name }}
                    </el-tag>
                </div>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" placeholder="请输入备注" clearable type="textarea"></el-input>
            </el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="visible = false">取 消</el-button>
			<el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
        <select-admin v-if="dialog.admin" ref="adminDialog" @success="handleSuccess" @closed="dialog.admin = false"></select-admin>
	</el-dialog>
</template>

<script>
import selectAdmin from '@/views/setting/admin/selectAdmin.vue';
export default {
  components: { selectAdmin },
	emits: ['success', 'closed'],
	data() {
		return {
			dialog: {
				admin: false
			},
			mode: "add",
			titleMap: {
				add: '新增销售',
				purchase: '提醒',
				house: '提醒',
				show: '查看'
			},
			visible: false,
			isSaveing: false,
			//表单数据
			form: {
                value_id: "",
                from_type: "",
                order_no: "",
                apply_id: "",
                remark: "",
                receive_staff: [],
			},
			//验证规则
			rules: {
                status: [
					{ required: true, message: '请选择通过拒绝' }
				],
            },
            code: "",
            userList: [],
            bell_title: "",
		}
	},
	mounted() {
	},
	methods: {
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
		//表单提交方法
		submit() {
            let array = []
            this.userList.map(item=>{
                array.push(item.id)
            })
            this.form.receive_staff = array
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
                    var res = await this.$API.tips.add.post(this.form);
					this.isSaveing = false;
					if (res.code == 1) {
						this.$emit('success', this.form, this.mode)
						this.visible = false;
						this.$message.success("操作成功")
					} else {
						this.$alert(res.message, "提示", {type: 'error'})
					}
				} else {
					return false;
				}
			})
		},
		//表单注入数据
		async setData(data,name,type) {
            this.form.value_id = data.id
            this.form.apply_id = data.apply_id
            this.form.from_type = type
            this.form.order_no = data.code
            this.bell_title = `${name}提醒 单据号：${data.code}`
		},
        select_user(){
            this.dialog.admin = true
            this.$nextTick(() => {
                this.$refs.adminDialog.open()
            })
        },
        handleSuccess(data){
            let array = []
            data.map(item=>{
                let exist = this.common.isExist(item.id, this.userList, 'id')
                if (exist) {
                    return
                }
                array.push({
                    id: item.id,
                    name: item.name,
                })
            })
			this.userList = [...this.userList, ...array]
        },
        delTag(index){
            this.userList.splice(index, 1)
        },
	}
}
</script>

<style lang="scss">
.el-input-group__append{
    padding: 0 8px;
}
.border{
    width: 100%;
    height: 100px;
    border: 1px solid #dcdfe6;
    padding: 5px;
}
</style>
